import { BottomTabBarProps, BottomTabNavigationOptions } from '@react-navigation/bottom-tabs';
import { ParamListBase, TabNavigationState } from '@react-navigation/native';
import { useCallback } from 'react';
import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { pxToVh, pxToVw, screenWidth } from '@utils/pxToVx.ts';

// 首页tabbar导航栏
const HomeTabBar: React.FC<BottomTabBarProps> = ({ state, descriptors, navigation }) => {
  const { bottom } = useSafeAreaInsets();
  const getLabel = useCallback(
    (
      options: BottomTabNavigationOptions,
      route: TabNavigationState<ParamListBase>['routes'][0],
      isFocused: boolean,
    ) => {
      if (options.tabBarLabel) {
        if (typeof options.tabBarLabel === 'function') {
          return options.tabBarLabel({
            focused: isFocused,
            color: options.tabBarActiveTintColor ?? '#fff',
            position: options.tabBarLabelPosition ?? 'below-icon',
            children: route.name,
          });
        } else {
          return options.tabBarLabel;
        }
      }

      if (options.title) {
        return options.title;
      }
    },
    [],
  );

  return (
    <View style={[styles.tabContainer, { paddingBottom: bottom, height: pxToVh(61) + bottom }]}>
      {state.routes.map((route, index) => {
        const isFocused = state.index === index;

        const { options } = descriptors[route.key];

        const label = getLabel(options, route, isFocused) ?? route.name;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        return (
          <Pressable
            key={index}
            accessibilityRole="button"
            accessibilityLabel={options.tabBarAccessibilityLabel}
            onPress={onPress}
            onLongPress={onLongPress}
            hitSlop={{ bottom: pxToVh(20), left: pxToVw(40), right: pxToVw(40) }}
            style={[styles.tabItem, isFocused && styles.activeTabItem]}
          >
            <View style={[styles.border, isFocused && styles.activeBorder]} />
            {options.tabBarIcon
              ? options.tabBarIcon({
                  focused: isFocused,
                  color: 'black',
                  size: pxToVw(28),
                })
              : null}
            <Text style={[styles.tabItemText, isFocused && styles.activeTabItemText]}>{label}</Text>
          </Pressable>
        );
      })}
      <Pressable style={styles.cameraButtonWrapper}>
        <Image style={styles.cameraButton} source={require('@images/home/camera.png')} />
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  tabContainer: {
    height: pxToVh(61),
    width: screenWidth,
    flexDirection: 'row',
    justifyContent: 'space-around',
    // alignItems: 'center',
    position: 'absolute',
    bottom: 0,
    right: 0,
    zIndex: 2,
    borderTopLeftRadius: pxToVw(40),
    borderTopRightRadius: pxToVw(40),
    backgroundColor: 'rgba(255, 255, 255, 1)',
    // overflow: 'hidden',
  },
  tabItem: {
    width: pxToVw(60),
    paddingHorizontal: pxToVw(7),
    alignItems: 'center',
  },
  activeTabItem: {},
  border: {
    height: pxToVh(3),
    width: pxToVh(57),
    borderTopColor: 'rgba(0, 0, 0, 1)',
    borderRadius: pxToVw(10),
    marginBottom: pxToVh(10),
  },
  activeBorder: {
    borderTopWidth: pxToVh(3),
  },
  tabItemText: {
    fontSize: pxToVw(11),
    lineHeight: pxToVh(13),
    color: 'rgba(0, 0, 0, 0.50)',
  },
  activeTabItemText: {
    color: '#000',
  },
  cameraButtonWrapper: {
    position: 'absolute',
    zIndex: 3,
    top: -pxToVh(30),
    left: screenWidth / 2 - pxToVw(30),
  },
  cameraButton: {
    width: pxToVw(60),
    height: pxToVw(60),
  },
});

export default HomeTabBar;
